<template>
  <h1>一个人的信息</h1>
<!-- vue3发现name age 是refImpl引用对象后 会自动读取value值 所以不用写成 name.value 或 age.value -->
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>工作种类:{{ job.type }}</h2>
  <h2>工作薪资:{{ job.salary }}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
 import {ref} from 'vue'

export default {
  name: 'App',

  setup: function () {
    let name = ref('张三');
    let age = ref(18)
    let job = ref({
      type:"前端工程师",
      salary:'30K'
    })

    function changeInfo(){
      name.value = '李四'
      age.value = 19
      console.log(job)
      job.value.type='后端'
      job.value.salary='40K'
    }


    //返回一个函数（常用）
    return {
      name: name,
      age: age,
      job:job,
      changeInfo:changeInfo


    }
  }
}
</script>


